<template>
    <ul class="children" v-if="pathRes" >
        <li v-for="(childPath, index) in pathRes" :key="index" :class="{pathOpen:childPath.children, pathClose:!childPath.children}">
            <div class="nodeTitle" :class="{selected:childPath.id == activeIndex}">
                <div :style="'margin-left:'+tabLevel*28+'px;'" class="title" :class="{active:childPath.id == activeIndex}" @click="setActiveExplain(childPath.idx + ':' + childPath.id)">{{childPath.t}}</div>
            </div>
            <detailList v-if="childPath.children" :pathRes="childPath.children" :parentPath="parentPath?parentPath+','+childPath.idx + ':' + childPath.id : childPath.idx + ':' + childPath.id"></detailList>
        </li>
    </ul>
</template>
<script>
export default {
    name: "detailList",
    props: {
        pathRes: Array,
        parentPath: String
    },
    data() {
        return {
            activeIndex: this.getActiveIndex(),
            tabLevel: this.getTabLevel()
        }
    },
    created() {
        },
    watch: {
        $route() {
            this.activeIndex = this.getActiveIndex()
        },
    },
    mounted() {
    },
    methods: {
        getTabLevel() {
            if (!this.parentPath) {
                return false;
            }
            const arrPath = this.parentPath.split(',');
            return arrPath.length;
        },
        getActiveIndex() {
            if (!this.$route.query.path) {
                return false;
            }
            const arrPath = this.$route.query.path.split(':');
            return arrPath.pop();
        },
        postRender(html) {
            return he.decode(html);
        },
        getPath(nodePath) {
            return this.parentPath?this.parentPath+","+nodePath:nodePath;
        },
        setActiveExplain(pathTarget) {
            let oldQuery = this.$route.query;
            this.$router.push({ name: 'Case', query: {idx:oldQuery.idx, qid: oldQuery.qid, term: oldQuery.searchTerm, path: this.getPath(pathTarget)}});
            console.log(pathTarget);
        },
    }
}
</script>
<style lang="scss" scoped>
    .casesList {
        box-sizing: border-box;
        text-align: left;
        margin: 0 auto 0 228px;
        padding-top: 23px;
        height: fill-available;
        .title {
            font-size: 16px;
            color: #929297;
            div {
                padding-bottom: 4px;
                border-bottom: 5px solid #f66001;
                display: inline-block;
            }
        }
        .currentTittle {
            font-size: 18px;
            color: #ba2319;
            background: url(../../imgs/icons/dot-list.png) 0 center no-repeat;
            background-size: 8px;
            padding-left: 20px;
            &.hasChildren {
                background: url(../../imgs/icons/downFlesh-list.png) 0 center no-repeat;
                background-size: 10px 5px;
            }
        }
        .explanation {
            font-size: 16px;
            // padding-bottom: 1.4rem;
            .nodeTree {
                position: relative;
                &>.children {
                    width: 40%;
                }
                .nodeTitle {
                    cursor: pointer;
                }
                .nodeTitle.selected {
                    background: #f66001;
                    .title, .active {
                    background: url(../../imgs/icons/fleshDownWhite.png) 0 center no-repeat;
                    font-weight: 400;
                    color: #fff;
                    height: 25px;
                    line-height: 25px;
                    box-sizing: border-box;
                    }
                }
                .detailMdWrapper {
                    margin: 0;
                    position: absolute;
                    top: 0;
                    right: 0;
                    width: 58%;
                    margin-bottom: 24px;
                }
            }
            h3 {
                margin-top: 60px;
                font-size: 24px;
                color: #f66501;
                border-bottom: 1px solid #979797;
                div {
                    padding-bottom: 4px;
                    border-bottom: 5px solid #f66001;
                    display: inline-block;
                }
            }
            .children {
                padding: 0;
                .active {
                    color: #333;
                    font-weight: 700;
                }
            }
            .detailMdWrapper {
                margin: 20px 5px;
            }
            .pathOpen {
                .title {
                    background: url(../../imgs/icons/fleshDownOrange.png) 0 center no-repeat;
                    background-size: 8px;
                    padding: 0 0 0 14px;
                } 
            }
            .pathClose {
                .title {
                    cursor: pointer;
                    background: url(../../imgs/icons/fleshRightOrange.png) 0 center no-repeat;
                    background-size: 5px;
                    padding: 0 0 0 14px;
                    margin: 4px 0;
                } 
            }
        }
        .detail {
            margin-top: 16px;
            font-size: 16px;
            line-height: 1.6;
            color: #929297;
            padding: 8px 20px;
            background-color: #fff;
            .detailWrapper {
                padding-bottom: 140px;
            }
        }
        .children {
            padding-left: 26px;
            list-style: none;
            .child {
                cursor: pointer;
                background: url(../../imgs/icons/fleshRightOrange.png) 0 center no-repeat;
                background-size: 5px;
                font-size: 16px;
                padding: 4px 0 4px 14px;
                color: #929297;
            }
        }
        .parentBtn {
            float: right;
            .icon {
                width: 18px;
                height: 18px;
            }
        }
    }
    .clearFix {
    clear: both;
    }
</style>